<template>
  <div class="bw-node-attr-data-obj-select">
    <Select v-bind="attrs" v-model:value="content" />
  </div>
</template>

<script setup lang="ts">
import { Select } from 'ant-design-vue'
import { computed, onMounted, ref } from 'vue'
import { api, useAxiosResponse } from '/@/api'
import { BwPageResultOutputSysDataObjectAppGetListOutput } from '@bitwit/tenantapi'
import { DefaultOptionType } from 'ant-design-vue/es/select'

const emit = defineEmits(['update:value'])
const props = withDefaults(
  defineProps<{
    value?: string | number
    options?: DefaultOptionType[]
    [key: string]: any
  }>(),
  {}
)

const content = computed({
  get: () => props.value,
  set: (value) => {
    emit('update:value', value)
  },
})

const curOptions = ref<DefaultOptionType[]>([])

const attrs = computed(() => {
  return {
    showSearch: true,
    optionFilterProp: 'label',
    ...props,
    options: curOptions.value,
  }
})

onMounted(() => {
  api.apiSysDataObjectGetListPost().then((res) => {
    const resData =
      useAxiosResponse<BwPageResultOutputSysDataObjectAppGetListOutput>(res)
    curOptions.value =
      resData?.rows?.map((item) => {
        return {
          label: item.name ?? '未命名数据对象',
          value: item.id,
        }
      }) ?? []
  })
})
</script>

<style lang="less" scoped>
.bw-node-attr-data-obj-select {
  width: 100%;
  height: auto;
  .ant-select {
    width: 100%;
  }
}
</style>
